import { StyleSheet, Text, View, TouchableWithoutFeedback, Image } from 'react-native'
import React, { useState, useEffect, useRef } from 'react'
import { pTx } from "../../utils/dimensions"
import httpApi from '../../api';
import IconFont from '@pingtou/rn-vant-icons'
import NewVersion from "../../components/rootSiblings/newVersion"
import DeviceInfo from 'react-native-device-info';

export default function SystemManagement(props) {
    const newVersionRefs = useRef(null)
    const [version, setVersion] = useState(false)
    const appVersion = DeviceInfo.getVersion(null);
    const getAppVersion = () => {
        httpApi.getAppVersion({ id: 0 }).then(res => {
            if (compareVersion(res.data.AppVersion.Version, appVersion) > 0) {

            }
            setVersion(res.data.AppVersion)
        })
    }
    useEffect(() => {
        getAppVersion()
    }, [])

    const compareVersion = (v1, v2) => {
        if (!version) return 0
        if (v1 == v2) {
            return 0;
        }
        const vs1 = v1.split(".").map(a => parseInt(a));
        const vs2 = v2.split(".").map(a => parseInt(a));

        const length = Math.min(vs1.length, vs2.length);
        for (let i = 0; i < length; i++) {
            if (vs1[i] > vs2[i]) {
                return 1;
            } else if (vs1[i] < vs2[i]) {
                return -1;
            }
        }

        if (length == vs1.length) {
            return -1;
        } else {
            return 1;
        }
    }

    return (
        <View style={styles.page}>
            <View style={styles.logoBox} >
                <Image style={[styles.logo]} source={require('../../assets/logo.png')}></Image>
                <Text style={styles.name} >Tweet</Text>
                <Text style={styles.label} >当前版本：{appVersion}</Text>
            </View>
            <View style={styles.cellGroup} >
                <TouchableWithoutFeedback onPress={() => compareVersion(version.Version, appVersion) > 0 && newVersionRefs.current()}>
                    <View style={styles.cell} >
                        <View style={styles.cellLeft} >
                            <Text style={styles.cellName} >版本更新</Text>
                        </View>
                        <View style={styles.rightCell} >
                            <Text style={styles.cellLabel} >最新版本 {version.Version}</Text>
                            {compareVersion(version.Version, appVersion) > 0 && <View style={styles.hint} ></View>}
                            <IconFont name="arrow" color={"rgba(178, 178, 178, 1)"} size={pTx(14)} />
                        </View>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback>
                    <View style={styles.cell} >
                        <View style={styles.cellLeft} >
                            <Text style={styles.cellName} >更新日志</Text>
                        </View>
                        <IconFont name="arrow" color={"rgba(178, 178, 178, 1)"} size={pTx(14)} />
                    </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback>
                    <View style={[styles.cell, { borderBottomWidth: 0 }]} >
                        <View style={styles.cellLeft} >
                            <Text style={styles.cellName} >用户协议</Text>
                        </View>
                        <IconFont name="arrow" color={"rgba(178, 178, 178, 1)"} size={pTx(14)} />
                    </View>
                </TouchableWithoutFeedback>
            </View>
            <NewVersion newVersionRefs={newVersionRefs} />
        </View>
    )
}

const styles = StyleSheet.create({
    page: {
        flex: 1,
    },
    logoBox: {
        paddingVertical: pTx(34),
        alignItems: "center",
        backgroundColor: "#FFF",
    },
    logo: {
        width: pTx(76),
        height: pTx(76),
    },
    name: {
        marginTop: pTx(5),
        fontSize: pTx(18),
        color: "#0A0C14",
        fontWeight: "500"
    },
    label: {
        marginTop: pTx(6),
        fontSize: pTx(13),
        color: "#AFB5BD",
    },
    currencyIconMin: {
        width: pTx(20),
        height: pTx(20),
    },
    cellGroup: {
        marginTop: pTx(8),
        backgroundColor: "#FFF",
        borderRadius: pTx(6),
        paddingHorizontal: pTx(15),
    },
    cell: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        paddingVertical: pTx(15),
        borderColor: "rgba(175, 181, 189, 0.15)",
        borderBottomWidth: 1
    },
    hint: {
        marginLeft: pTx(10),
        width: pTx(5),
        height: pTx(5),
        borderRadius: pTx(5),
        backgroundColor: "#EA6055"
    },
    cellLeft: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
    },
    rightCell: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
    },
    cellName: {
        fontSize: pTx(16),
        color: "#000"
    }
})